/*提醒属性*/
/* 动画属性
 * 过渡属性 - transition: background-color .3s linear;ease快到慢、linear恒速、ease-in越来越快、ease-out越来越慢、ease-in-out先快后慢
 * 2D旋转属性 -  transform:rotate(180deg);//需在操作的样式加：transition:all 3s;
 * 3D旋转属性 - transform:rotateY(180deg);//需在操作的样式加：transition:all 3s;
 * 偏移属性 - transform: translateY(-3px);
 * 缩放属性 - transform: scale(1.1);
 * 字体缩进属性 - text-indent;
 * 背景颜色渐变属性 - background: linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,.001));
 * 
 * 表格属性
 * 取消表格外边框 - border-collapse: collapse;
 * 
 * 文本属性
 * 阻止复制属性 - user-select: none;
 * 溢出隐藏属性 - overflow:hidden;
 * 强制文本在一行显示属性 - white-space:nowrap;
 * 文本溢出显示省略号属性 - text-overflow:ellipsis;
 * 
 * css属性
 * 设置元素的垂直对齐方式 - vertical-align: middle;
 * 设置边框样式 - outline: none;
 * 
 * 兼容属性
 * css3 4个内核 -moz- -ms- -o- -webkit-;
 * IE opacity写法 - filter:alpha(opacity=100);*/



*{margin: 0;padding: 0;font-family: "微软雅黑";font-size: 14px;}
body{overflow-y: scroll;color: #000;background-color: #f5f5f5;}
a{color: inherit;font-size: inherit;text-decoration: none;}
a:link{color: inherit;text-decoration: none;}
a:visited{color: inherit;text-decoration: none;}
a:hover{color: inherit;text-decoration: none;}
a:active{color:  inherit;text-decoration: none;}
li{list-style: none;}
h1,h2,h3,h4,h5,h6{font-weight: normal;}
table{border-collapse:collapse;}
th, td{padding: 5px;}
input[type="text"]:focus, input[type="password"]:focus, select:focus{box-shadow: none !important;}
.left{float: left;}
.right{float: right;}
.clearfix::after{clear: both;content: "";height: 0;display: block;visibility: hidden;}


/*头部*/
#header{width: 100%;background-color: #303030;height: 40px;color: #adadad;}
.header-left{float: left;height: 40px;line-height: 40px;}
.header-right{float: right;height: 40px;line-height: 40px;}
#header .container a:hover{color: #fff;}


/*主题*/
#main{clear: both;width: 100%;}

/*状态*/
.status{margin-top: 20px;}

/*商品*/
.products{color: #333;width: 100%;position: relative;overflow: hidden;margin: 20px 0;}
.products h2{margin: 20px 0;clear: both;float: left;}
.products ul{width: 9999px;position: relative;margin-top: 73px;clear: both;}
.products ul li{float: left;width: 210px;padding: 35px 0 20px;background-color: #fff;transition: all .2s linear;}
.products ul li+li{margin: 0 0 15px 15px;}
.products-img{width: 150px;height: 150px;margin: 0 auto 18px;}
.products ul li img{width: 150px;height: 150px;margin: 0 auto;}
.products ul li h3{color: #333;font-size: 14px;font-weight: 400;text-align: center;margin: 0 10px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
.products ul li p{color: #ff6700;text-align: center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin: 10px;}
.products ul li span{text-align: center;display: block;}
.products ul li:hover{transform: translateY(-3px);box-shadow: 0 15px 30px rgba(0,0,0,.1);}


/*商品 - 详情*/
.shop{width: 100%;margin: 20px 0;}
.shop-img{width: 560px;height: 560px;}
.shop-img img{width: 100%;height: 100%;}
.shop-details{width: 550px;padding: 0 40px;}
.shop-details p span{color: #ff6700;}
.shop-comment{width: 550px;padding: 10px 40px;margin-top: 100px;border: 2px solid #EDEDED;border-radius: 10px;}
.shop-comment ul li{border-bottom: 2px solid #ededed;padding: 10px 10px 0;}
.shop-comment p span{color: #000;margin-top: 10px;}



/*商品 - 更多*/
.more{margin: 0 auto 0 -14px;width: 1124px;}
.more-title h2{line-height: 64px;margin-left: 14px;}
.more-brand{margin: 0 0 14px 14px;}
.more-products ul li{width: 541px;margin-left: 14px;display: inline-block;transition: all .2s linear;padding-bottom: 30px;position: relative;margin-top: 14px;background-color: #fff;}
.more-products ul li:nth-child(1){margin-top: 0;}
.more-products ul li:nth-child(2){margin-top: 0;}
.more-products ul li img{width: 541px;height: 541px;}
.more-products ul li:hover{box-shadow: 0 15px 30px rgba(0,0,0,0.1);transform: translate3d(0, -5px, 0);}
.more-products ul li h3{line-height: 26px;margin: 38px 0 0 48px;width: 200px;white-space:nowrap;text-overflow:ellipsis;overflow: hidden;}
.more-describe{line-height: 18px;margin: 3px 0 0 48px;color: rgba(51,51,51,0.7);font-size: 14px;}
.more-price{position: absolute;right: 48px;bottom: 30px;margin: 0;color: #ff6700;}
.more-price strong{font-size: 30px;font-weight: normal;}



/*购物车*/
.car-btn{display: block;width: 38px;height: 35px;color: #757575 !important;font-size: 20px;transition: all .2s linear;}
.car-btn:hover{background-color: #e0e0e0;}
.car table tbody tr td input{text-align: center;border: none;height: 38px;width: 72px;}
.car table tbody tr td input:focus{outline: none;}
